<template>
  <ga-table :data="data" row-key="id" size="medium" :pagination="{ total }"
    @page-change="(page) => emits('on-turn-page', page)"
    @page-size-change="(size) => emits('on-change-page-size', size)" @sorter-change="changeSorter">

    <template #columns>

      <ga-table-column title="URL" data-index="contentKey" ellipsis>
        <template #cell="{ record }">
          <ga-tooltip position="tl" :content="record.contentKey || record.dstPort">
            <span class="span-link" @click="() => emits('on-click-item', record)">{{ record.contentKey || record.dstPort
              }}</span>
          </ga-tooltip>
        </template>
      </ga-table-column>
      <ga-table-column title="协议" data-index="appProtocol" :width="110"></ga-table-column>
      <ga-table-column title="源端"
        :data-index="type === 'workload' ? 'srcWorkloadName' : 'srcPodName'"></ga-table-column>
      <ga-table-column title="异常类型" data-index="exceptionClass" :width="100">
        <template #cell="{ record }">
          {{ exceptionTypesMap[record.exceptionClass] }}
        </template>
      </ga-table-column>
      <ga-table-column title="状态码" data-index="statusCode" :width="100">
      </ga-table-column>
      <ga-table-column title="请求耗时" data-index="requestTotalTime" :width="120"
        :sortable="{ sorter: true, sortDirections: ['ascend', 'descend'], sortOrder }">
        <template #cell="{ record }">
          {{ formatTimeNs(record.requestTotalTime) }}
        </template>
      </ga-table-column>
      <ga-table-column title="请求时间" data-index="requestTime">
      </ga-table-column>
    </template>
  </ga-table>

</template>

<script setup>
import { formatTimeNs } from '@/utils/format'
import { computed } from 'vue';

import { ref } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: Boolean,
  type: String,
  total: Number,
  exceptionParams: Object
})
const emits = defineEmits(['on-click-item', 'on-turn-page', 'on-change-page-size', 'on-change-exception-params'])

const changeSorter = (orderFiled, direction) => {
  console.log(orderFiled, direction, 'dataIndex');
  const isDesc = direction === 'descend' ? true : (direction === 'ascend' ? false : undefined)

  const data = {
    orderFiled: typeof isDesc === 'undefined' ? undefined : orderFiled,
    isDesc,
  }
  console.log(data, 'data',);
  emits('on-change-exception-params', data)
}
const sortOrder = computed(() => {
  return props.exceptionParams.orderFiled === "requestTotalTime" ? ( props.exceptionParams.isDesc ? "descend" : "ascend") : null
})
const exceptionTypesMap = {
  1: '建连失败',
  2: '错误请求',
  3: '错误请求',
  4: '慢请求',
  5: '错慢请求',
}
</script>

<style scoped lang="less"></style>
